<!-- 展示容器信息 -->
<div *ngIf="dataSet!=null">
  <div nz-row>
    <div nz-col nzSpan="24" class="header-detail">
      <div nz-row class="pt-pb">
        <div nz-col nzSpan="16">
          <h1 class="pt-pb-30">
            {{dataSet.fileName}}
          </h1>
          <div nz-row>
            <div nz-col>
              <div class="grade">
                <!-- {{dataSet.grade}} -->
                <span [ngSwitch]="dataSet?.grade">
                  <p *ngSwitchCase="'E'" class="grade-E">
                    {{ dataSet.grade }}
                  </p>
                  <p *ngSwitchCase="'D'" class="grade-D">
                    {{ dataSet.grade }}
                  </p>
                  <p *ngSwitchCase="'C'" class="grade-C">
                    {{ dataSet.grade }}
                  </p>
                  <p *ngSwitchCase="'B'" class="grade-B">
                    {{ dataSet.grade }}
                  </p>
                  <p *ngSwitchCase="'A'" class="grade-A">
                    {{ dataSet.grade }}
                  </p>
                  <p *ngSwitchDefault>
                    默认
                  </p>
                </span>
              </div>
              | <span class="font-style">当前使用版本:</span> {{dataSet.fileVersion}}
              | <span class="font-style">SHA1:</span> {{dataSet.hash}}
            </div>
          </div>
        </div>
        <div nz-col nzSpan="8" class="float-right pt-pb-30" style="font-size: 20px">
          <i nz-icon type="exclamation-circle" theme="outline"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="folder-add" theme="outline"></i>&nbsp;&nbsp;&nbsp;&nbsp;
          <i nz-icon type="delete" theme="outline"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- 展示漏洞数、代码数等 -->
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="5">
            <div class="circle circle_red">
              <i class="circle_icon icon-sac-bug"></i>
            </div>
          </div>
          <div nz-col [nzSpan]="17">
            <div nz-row>
              <span class="font-style">CNNVD</span> 4
            </div>
            <div nz-menu-divider style="margin: 0 40px;"></div>
            <div nz-row>
              <span class="font-style">CVE</span> {{ dataSet.cveNums}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="5">
            <div class="circle circle_blue">
              <i class="circle_icon icon-sac-code"></i>
            </div>
          </div>
          <div nz-col [nzSpan]="17">
            <div>1</div>
            <div class="font-style">代码行数</div>
          </div>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="5">
            <div class="circle circle_green">
              <i class="circle_icon icon-sac-computer"></i>
            </div>
          </div>
          <div nz-col [nzSpan]="17">
            <div>
              {{ applicationNum }}
            </div>
            <div class="font-style">使用此包的应用数</div>
          </div>
        </div>
      </div>
    </div>
    <div nz-col class="gutter-row" nzSpan="6">
      <div class="gutter-box">
        <div nz-row>
          <div nz-col [nzSpan]="5">
            <div class="circle circle_orange">
              <i class="circle_icon icon-sac-pie-chart"></i>
            </div>
          </div>
          <div nz-col [nzSpan]="17">
            <div> {{dataSet.classCount}} </div>
            <div class="font-style">类总数</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 展示应用数、服务器数 -->
  <div nz-row class="lib-detail-application">
    <div nz-col nzSpan="24" class="lib-datail-content">
      <div ng-row>
        <div nz-col nzSpan="24">
          <span class="font-style">当前使用版本:</span>
          {{ dataSet.fileVersion }}
          {{dataSet.releaseDate | date :'yyyy-MM-dd' }}
          |
          <span class="font-style">最新版本:</span>
          {{ dataSet.lastestVersion }}
          {{ dataSet.releaseDate | date:'yyyy-MM-dd' }}
          |
          <span class="font-style">推荐使用版本:</span>
          {{ dataSet.suggestionLib.fileName }}
          {{ dataSet.suggestionLib.releaseDate | date : 'yyyy-MM-dd' }}
        </div>
      </div>
      <div nz-row>
        <div nz-col>
          {{ applicationNum }} 应用
        </div>
        <div nz-col class="applications">
          <nz-list [nzDataSource]="data" [nzRenderItem]="item"
            [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <span *ngFor="let application of dataSet.applications">
              <i nz-icon type="windows" theme="outline"></i>
              <a href="javascript:;">
                {{ application.showName }}
              </a>
            </span>

          </nz-list>
        </div>
      </div>
      <div nz-row>
        <div nz-col>
          {{ dataSet.servers.length }} 服务器
        </div>
        <div nz-col class="servers">
          <nz-list [nzDataSource]="data" [nzRenderItem]="item"
            [nzGrid]="{gutter: 16, xs: 24, sm: 12, md: 6, lg: 6, xl: 4 }">
            <span *ngFor="let server of dataSet.servers">
              <i class="icon-sac-server"></i>
              <a href="javascript:;">
                {{ server.hostName }}
              </a>
            </span>
          </nz-list>
        </div>
      </div>
    </div>
  </div>

  <div nz-row class="panel" [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
    <!-- 第一行 -->
    <div nz-row>
      <div class="panel-title" nz-col nzSpan="12">
        CVE
      </div>
      <div class="panel-title" nz-col nzSpan="12">
        CNNVD
      </div>
    </div>
    <!-- 第二行 :数据一一对应-->
    <div nz-row>
      <div nz-col>

        <div nz-row>
          <ng-container *ngIf="dataSet?.cve; else noData">
            <div nz-row *ngFor="let cve of dataSet?.cve">
              <div nz-col nzSpan="12" class="panel-box">
                <!-- 放cve -->
                <div nz-row class="panel-box-row">
                  <div ng-col class="panel-box-title">
                    <a href="javascript:;">
                      {{ cve.name }}
                    </a>
                    分数 {{ cve.score }}
                  </div>
                </div>
                <div nz-row class="panel-box-row">
                  <div nz-row>
                    <div nz-col nzSpan="6">访问复杂性:</div>
                    <div nz-col nzSpan="6"> <strong>{{ cve.accessComplexity }}</strong> </div>
                    <div nz-col nzSpan="6">可用性影响:</div>
                    <div nz-col nzSpan="6"><strong>{{ cve.availabilityImpact }}</strong></div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="6">访问矢量:</div>
                    <div nz-col nzSpan="6"><strong>{{ cve.accessVector }}</strong></div>
                    <div nz-col nzSpan="6">保密性影响:</div>
                    <div nz-col nzSpan="6"><strong>{{ cve.confidentialityImpact }}</strong></div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="6">需要验证:</div>
                    <div nz-col nzSpan="6"><strong>{{ cve.authentication }}</strong></div>
                    <div nz-col nzSpan="6">完整性影响:</div>
                    <div nz-col nzSpan="6"><strong>{{ cve.integrityImpact }}</strong></div>
                  </div>
                </div>
                <div nz-row class="panel-box-row">
                  <div nz-col>
                    {{ cve.description }}
                  </div>
                </div>

              </div>
              <div nz-col nzSpan="12" class="panel-box">
                <!-- 放cnnvd -->
                <div nz-row class="panel-box-row">
                  <div ng-col class="panel-box-title">
                    <a href="javascrpit:;">
                      {{ cve.cnnvdDetail.name }}
                    </a>
                  </div>
                </div>

                <div nz-row class="panel-box-row">
                  <div nz-row>
                    <div nz-col nzSpan="6">CNNVD:</div>
                    <div nz-col nzSpan="6"> <strong>{{cve.cnnvdDetail.cnnvdId}}</strong> </div>
                    <div nz-col nzSpan="6">威胁类型:</div>
                    <div nz-col nzSpan="6"><strong>{{cve.cnnvdDetail.vulnType }}</strong></div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="6">危害等级:</div>
                    <div nz-col nzSpan="6"><strong>{{cve.cnnvdDetail.severity}}</strong></div>
                    <div nz-col nzSpan="6">发布时间:</div>
                    <div nz-col nzSpan="6"><strong>{{cve.cnnvdDetail.publishedDate}}</strong></div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="6">CVE编号:</div>
                    <div nz-col nzSpan="6"><strong>{{cve.cnnvdDetail.cveId}}</strong></div>
                    <div nz-col nzSpan="6">更新时间:</div>
                    <div nz-col nzSpan="6"><strong>{{cve.cnnvdDetail.modifiedDate}}</strong></div>
                  </div>
                </div>
                <div nz-row class="panel-box-row">
                  <div nz-col>
                    {{cve.cnnvdDetail.vulnDescript}}
                  </div>
                </div>
              </div>
            </div>
          </ng-container>
          <ng-template #noData>
            <div nz-row class="panel-box">
              <div class="no-data">暂无记录</div>
            </div>
          </ng-template>
        </div>
      </div>
    </div>


    <!-- <div nz-col [nzSpan]="12">
      此处加 for 循环
      <div nz-row class="panel-box" *ngFor="let cve of dataSet?.cve">
        <div class="no-data">暂无记录</div>

      </div>
    </div> -->
  </div>

</div>
